<template>
  <div class="home">
    <div class="topbox">
      <h2>究极IKUN后台管理系统</h2>
      <div class="userInfo">
        <div class="portrait">
          <img src="../assets/02.jpeg" alt />
        </div>
        <div class="admin">
          <el-dropdown>
            <span class="el-dropdown-link">{{name||"用户"}}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="surprise">修改密码</el-dropdown-item>
                <el-dropdown-item @click="back">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="buttombox">
      <div class="sidebar" :style="{width:isCollapse?'64px':'200px'}">
        <button @click="isCollapse=!isCollapse" class="Collapse">
          <el-icon v-if="isCollapse">
            <Expand color="#2c3e50" />
          </el-icon>
          <el-icon v-else>
            <Fold color="#2c3e50" />
          </el-icon>
        </button>
        <el-menu
          :default-active="activePath"
          router
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          unique-opened
          background-color="#2C3E5000"
          text-color="#CFE2E8"
          active-text-color="#ffd700"
        >
          <el-sub-menu :index="item.id + ''" v-for="(item,index) in Menus" :key="index">
            <template #title>
              <component :is="icons[item.id]"></component>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/'+childen.path" v-for="(childen,i) in item.children" :key="i">
                <el-icon>
                  <Menu />
                </el-icon>
                {{childen.authName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main" :style="{width:isCollapse?'calc(100vw - 64px)':'calc(100vw - 200px)'}">
        <div class="ovfwhiddin">
          <div class="mianbox">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

// 交互
<script setup>
import { getMenus } from "../tools/ajax.js";
import { ref, computed, reactive, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();
const isCollapse = ref(false);
const Menus = reactive([]);
const name = ref(window.sessionStorage.getItem("name"));
const icons = {
  125: (
    <el-icon>
      <UserFilled />
    </el-icon>
  ),
  103: (
    <el-icon>
      <Grid />
    </el-icon>
  ),
  101: (
    <el-icon>
      <GoodsFilled />
    </el-icon>
  ),
  102: (
    <el-icon>
      <List />
    </el-icon>
  ),
  145: (
    <el-icon>
      <TrendCharts />
    </el-icon>
  )
};
let activePath = ref("");
onBeforeMount(() => {
  let token = window.sessionStorage.getItem("token");
  getMenus({ type: "list" }).then(res => {
    Menus.push(...res.data);
  });
  activePath.value = window.sessionStorage.getItem("activePath");
});

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const back = () => {
  ElLoading.service({ target: ".home" });
  window.sessionStorage.setItem("token", "");
  window.sessionStorage.setItem("menus", "");
  setTimeout(() => {
    ElMessage.success("成功退出登录");
    router.push("/login");
    ElLoading.service({ target: ".home" }).close();
  }, 700);
};
const surprise = () => {
  ElMessage.error("surprise mother Faker !");
  ElMessage.warning("修 改 不 了 !");
  ElMessage.info("惊 不 惊 喜 ?");
  ElMessage.success("意 不 意 外 ?");
};
</script>

// 样式
<style scoped>
.home {
  height: 100vh;
  background: url(https://img.tt98.com/d/2020/2020061018025866/5ee0a1e6cb0c3.jpg)
    no-repeat center #00000086;
  background-size: 100% 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.topbox {
  height: 70px;
  padding: 0 30px;
  line-height: 70px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Collapse {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  margin: 2px 0 5px 0;
  transition: all 0.3s;
  border: 0;
  background-color: #ffffffa3;
}
.Collapse:hover {
  background-color: #74a3d3;
}
.sidebar {
  max-width: 200px;
  height: calc(100vh - 70px);
  transition: all 0.4s;
  overflow: hidden;
}
.el-menu {
  border: 0;
}
.el-menu .is-active {
  background-color: #00000020;
}
.buttombox {
  display: flex;
}
.main {
  height: calc(100vh - 70px);
  padding: 10px;
  transition: all 0.4s;
}
.ovfwhiddin {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.mianbox {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #ffffffcd;
  border-radius: 20px;
  overflow: auto;
}
.mianbox::-webkit-scrollbar {
  width: 6px;
}
.mianbox::-webkit-scrollbar-thumb {
  background-color: #d59186;
  border-radius: 5px;
}
.userInfo {
  display: flex;
  height: 40px;
  align-items: center;
}
.userInfo .portrait {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  overflow: hidden;
  border: 2px solid #fff;
}
.portrait img {
  width: 100%;
  vertical-align: top;
  height: 100%;
}
.admin {
  margin-left: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin .el-dropdown {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
</style>
